<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手风琴</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="wrapper">
        <ul class="wrapUl">
            <li>
                <div class="title">
                    <h1>
                        <a href="#loca1">温泉酒店</a>
                    </h1>
                </div>
                <div class="picBox picBox1"></div>
                <div class="location" id='loca1'>有谁不爱泡温泉？浸入雾气蒸腾的泉水之中，把身体泡成一片茶叶，舒展轻盈。有比这更美妙的感觉吗？</div>
            </li>
            <li>
                <div class="title">
                    <h1><a href="#loca2">时尚酒店</a></h1>
                </div>
                <div class="picBox picBox2"></div>
                <div class="location" id='loca2'>浪漫，是香闺围笼，是灯火迷离，泪眼婆裟的唯美，是杨柳岸、晓风残月中的无语凝噎……</div>
            </li>
            <li>
                <div class="title">
                    <h1><a href="#loca3">设计师酒店</a></h1>
                </div>
                <div class="picBox picBox3"></div>
                <div class="location" id='loca3'>前卫的酒店设计理念，独具魅力的风格，优美的自然风光才能有这样顶级的酒店</div>
            </li>
            <li>
                <div class="title">
                    <h1><a href="#loca4">青年旅店</a></h1>
                </div>
                <div class="picBox picBox4"></div>
                <div class="location" id='loca4'>我为你煮一杯温茶，斟一杯美酒。让我们席地而坐，听你的梦想。用你的只言片语装点我们的梦想博物馆</div>
            </li>
            <li>
                <div class="title">
                    <h1><a href="#loca5">民宿客栈</a></h1>
                </div>
                <div class="picBox picBox5"></div>
                <div class="location" id='loca5'>在这里，你可以静静发呆，而不被人打扰；在这里，你能看见最美好的星星，能让你找到最深的感动</div>
            </li>
            <li>
                <div class="title">
                    <h1><a href="#loca6">海岛酒店</a></h1>
                </div>
                <div class="picBox picBox6"></div>
                <div class="location" id='loca6'>不想过冬，厌倦沉重，就飞去热带的岛屿游泳，卸下包袱，放下压力，在这碧海蓝天之中</div>
            </li>
            <li>
                <div class="title">
                    <h1><a href="#loca7">海外酒店</a></h1>
                </div>
                <div class="picBox picBox7"></div>
                <div class="location" id='loca7'>因地形地质的区别，世界各地的温泉也千差万别，选择一处适合自己的温泉，你会忘记世界</div>
            </li>
        </ul>
    </div>
</body>
</html>